<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html, charset=utf-8">
	<title>Welcome :: Birthday</title>
	<style type="text/css">
		@font-face {
			font-family: "Consolas";
			src: url("./Consolas/consola-1.ttf");
		}

		* {
			padding: 0;
			margin: 0;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100vh;
			background-image: radial-gradient( at 0 0, #fbc2eb, #a6c1ee );
		}

		::selection {
			background-color: rgba( 0, 0, 0, .5 );
			color: #FFF;
		}

		.form {
			display: grid;
			grid-template: repeat( 8, 1fr ) / repeat( 6, 1fr );
			justify-items: center;
			align-items: center;
			height: 75vh;
			background-color: #FFF;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba( 50, 50, 50, .5 );
		}

		@media screen and ( min-width: 1200px ) {
			.form {
				width: 33vw;				
			}
		}

		@media screen and ( min-width: 600px ) and ( max-width: 1200px ) {
			.form {
				width: 75vw;				
			}
		}

		h1 {
			grid-area: 2 / 3 / 2 / 5;
			color: rgba( 0, 0, 0, .5 );
			font: normal 2.5rem "Consolas";
			text-align: center;
		}

		.username, .password {
			display: grid;
			grid-template: 1fr / 1fr 3fr;
			justify-items: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: relative;
		}

		.username {
			grid-area: 4 / 2 / 4 / 6;
		}

		.password {
			grid-area: 5 / 2 / 5 / 6;
		}

		label {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: relative;
			color: rgba( 0, 0, 0, .5 );
		}

		label:after {
			content: '';
			width: 1px;
			height: 50%;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY( -50% );
			background-image: linear-gradient( transparent, rgba( 0, 0, 0, .5 ), transparent );
		}

		#username,
		#password {
			width: 90%;
			height: 60%;
			color: rgba( 0, 0, 0, .5 );
			font: normal 1rem "Consolas";
			border: 0;
			border-bottom: 1px solid rgba( 0, 0, 0, .3 );
			outline: none;
			text-indent: 5px;
			transition: all .1s linear 0s;
			caret-color: rgba( 0, 0, 0, .5 );
		}

		#username:focus,
		#password:focus {
			width: 90%;
			height: 60%;
			color: rgba( 0, 0, 0, .5 );
			font: normal 1rem "Consolas";
			border: 0;
			border-bottom: 1px solid #000;
			outline: none;
			text-indent: 5px;
		}

		#login,
		#regist {
			width: 90%;
			height: 90%;
			position: relative;
			background-color: transparent;
			color: rgba( 0, 0, 0, .5 );
			font: normal 1rem 'Consolas';
			border: 0;
			border-radius: 5px;
			outline: none;
			box-shadow: 0 0 0 2px rgba( 0, 0, 0, .5 ) inset;
			cursor: pointer;
			transition: all .1s linear 0s;
		}

		#login:hover,
		#regist:hover {
			overflow: hidden;
			background-color: rgba( 0, 0, 0, .5 );
			color: #FFF;
			box-shadow: none;
		}

		#login {
			grid-area: 7 / 2 / 7 / 6;
		}

		@keyframes animate {
			from {
				width: 0;
				height: 0;
				opacity: 1;
			}
			to {
				width: 200px;
				height: 200px;
				opacity: 0;
			}
		}

		.circle {
			position: absolute;
			background-color: #FFF;
			border-radius: 100%;
			transform: translate( -50%, -50% );
			animation: animate .3s linear 0s;
		}
	</style>
</head>
<body>
	<div class="form">
		<h1>Login</h1>
		<div class="username">
			<label for="username">用户</label>
			<input type="text" id="username" autocomplete="off">
		</div>
		<div class="password">
			<label for="password">密码</label>
			<input type="password" id="password" autocomplete="off">
		</div>
		<button id="login">登录</button>
	</div>
	<script type="text/javascript">
		document.querySelectorAll("button").forEach( function(item){
			item.addEventListener("click", function(e){
				let x = e.clientX - e.target.offsetLeft;
				let y = e.clientY - e.target.offsetTop;
				let circle = document.createElement("span");
				circle.className = 'circle';
				circle.style.left = `${x}px`;
				circle.style.top = `${y}px`;
				e.target.appendChild( circle );
				setTimeout( function(){
					e.target.removeChild( circle );
				}, 300 );
			} );
		} );
		document.querySelector("button").addEventListener( "click", function(e){
			if( !document.querySelector("#username").value || 
				!document.querySelector("#password").value ){
				alert("信息不完整");
			}else if( document.querySelector("#username").value && 
				document.querySelector("#password").value ){
				if( document.querySelector("#username").value == "吴诗飏" ){
					setTimeout(function(){
						window.open( "./main.html" );
					}, 1000 );
				}else if( document.querySelector("#username").value == "吴诗轩" ){
					setTimeout(function(){
						window.open( "./main.html" );
					}, 1000 );
				}else {
					alert(":( 用户名不存在哦!");
				}
			}
		} );
	</script>
</body>
</html>